<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-注册</title>
    <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/js/register.js"></script>
    <script>
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        })

    </script>

</head>
<body>
<div class="register_con">
    <div class="l_con fl">
        <a class="reg_logo"><img src="/static/images/logo02.png"></a>
        <div class="reg_slogan">足不出户 · 新鲜每一天</div>
        <div class="reg_banner"></div>
    </div>

    <div class="r_con fr">
        <div class="reg_title clearfix">
            <h1>用户注册</h1>
            <a href="#">登录</a>
        </div>
        <div class="reg_form clearfix">
            <form method="post" action="/register/">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" name="user_name" id="user_name">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>密码:</label>
                        <input type="password" name="pwd" id="pwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" name="pwd2" id="cpwd">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>邮箱:</label>
                        <input type="text" name="email" id="email">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li>
                        <label>电话:</label>
                        <input type="text" name="mobile" id="mobile">
                        <span class="error_tip">提示信息</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" name="allow" id="allow" checked="checked">
                        <label>同意”天天生鲜用户使用协议“</label>
                        <span class="error_tip2">提示信息</span>
                    </li>
                    <div class="form-group">
                        <input type="text" class="form-control" id="captcha" placeholder="验证码"
                               autocomplete="off">
                        <img src="" id="captcha_img" alt="验证码">
                    </div>
                    <li class="reg_sub ">
                        <input type="submit" id="register" value="注 册" name="">

                        <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
                    </li>
                </ul>
            </form>
        </div>

    </div>

</div>

<div class="footer no-mp">
    <div class="foot_link">
        <a href="#">关于我们</a>
        <span>|</span>
        <a href="#">联系我们</a>
        <span>|</span>
        <a href="#">招聘人才</a>
        <span>|</span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
    <p>电话：010-****888 京ICP备*******8号</p>
</div>

</body>

<script>
    //一开始 就请求一次验证码
    {#$("#captcha_img").prop('src', "http://127.0.0.1:8000/image_codes/?uuid=" + Math.random());#}

    //点击图片 修改验证码 其实就是重新请求
    {#$("#captcha_img").click(function () {#}
    //修改请求路径后面的参数，每次不一样，这样就可以重新请求图片了
    {#$(this).prop('src', "http://127.0.0.1:8000/image_codes/?uuid=" + Math.random())#}
    //});
    {#$('#register').click(function () {#}
    {#    $.ajax({#}
    {#        url: "/register/",#}
    {#        type: "post",#}
    {#        dataType: 'json',#}
            {#headers: {"X-CSRFToken": $.cookie('csrftoken')},#}
    {#        data: {#}
    {#            username: $("#user_name").val(),#}
    {#            password: $("#pwd").val(),#}
    {#            password2: $("#pwd2").val(),#}
    {##}
    {#            email: $("#email").val(),#}
    {#            allow: $("#allow").val(),#}
    {##}
                {#uuid: document.getElementById("captcha_img").src.split('=')[1]#}
    {#        },#}
    {#        success: function (data) {#}
    {#            if (data.code_s == 0) {#}
    {#                window.location = '/'#}
    {#            } else {#}
    {#                alert(data.errmsg);#}
    {#                window.location = '/register/'#}
    {#            }#}
                {#$(".ret").val(data)#}
    {#        }#}
    {#    })#}
    //});
</script>
</html>